import React, { Component } from 'react'
import { requestSwiper, requestAddSwiper, requestDeleteSwiper, requestDeleteAllSwiper } from '../../api/swiper'
import { Image, Table, Space, Form, Input, Button, Modal, Spin, Tabs, Popconfirm } from 'antd'
import { connect } from 'react-redux'
import QueueAnim from 'rc-queue-anim'

const { TabPane } = Tabs

class Swiper extends Component {

    isUnload = false
    urlFormRef = React.createRef()
    localFormRef = React.createRef()
    uploadRef = React.createRef()

    columns = [
        {
            title: '序号',
            key: 'index',
            width: 150,
            render: (text, record, index) => index + 1
        },
        {
            title: '图片',
            dataIndex: 'img',
            width: 280,
            key: 'img',
            render: (text) => <Image key="img" src={text} width={230} placeholder={
                <Image
                    preview={false}
                    src="https://chengqige.com/svg/loading.png"
                    width={230}
                />
            }/>
        },
        {
            title: '链接',
            dataIndex: 'link',
            key: 'link',
        },
        {
            title: '提示',
            dataIndex: 'alt',
            key: 'alt',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record, index) => (
                <Space size="middle" key="action">
                    <Popconfirm onConfirm={this.delete.bind(this, record.bannerid)} title="确认删除？">
                        <Button type="primary" danger>
                            删除
                        </Button>
                    </Popconfirm>
                </Space>)
        }
    ]

    state = {
        loading: true,
        isModalVisible: false,
        dataSource: [],
        visible: false,
        tableHeight: window.innerHeight - 340,
        show: true
    }

    onUrlFormFinish (values) {
        // console.log(values)
        this.uploadFile(values)
        this.urlFormRef.current.resetFields()
    }

    onLocalFormFinish (values) {
        const file = this.uploadRef.current.files
        const formData = new FormData()
        Array.from(file).forEach(item => {
            formData.append('img', item)
        })
        formData.append('alt', values.alt)
        formData.append('link', values.link)
        this.uploadFile(formData)
        this.localFormRef.current.resetFields()
    }

    uploadFile (params) {
        requestAddSwiper(params).then(res => {
            // console.warn(res)
            this.loadData()
        })
    }

    // 编辑
    edit (id) {
        console.log(id)
    }

    // 删除
    delete (id) {
        // console.log(id)
        requestDeleteSwiper(id).then(res => {
            // console.log(res)
            this.loadData()
        })
    }

    componentDidMount () {
        this.loadData()
    }

    componentWillUnmount () {
        this.isUnload = true
    }

    loadData () {
        requestSwiper().then(res => {
            if (!this.isUnload) {
                this.setState({
                    loading: false,
                    dataSource: res.data && res.data.map((item, index) => {
                        item.key = index
                        return item
                    })
                })
            }
        })
    }

    showModel () {
        this.setState({
            isModalVisible: true
        })
    }

    hideModal () {
        this.setState({
            visible: false
        })
    }

    confirmModal () {
        this.setState({
            visible: false
        })
        requestDeleteAllSwiper().then(res => {
            console.log(res.data)
            this.loadData()
        })
    }

    removeAll () {
        this.setState({
            visible: true
        })
    }

    handleOk () {
        console.log('handle Ok')
        this.setState({
            isModalVisible: false
        })
    }

    handleCancel () {
        // console.log('handle Cancel')
        this.setState({
            isModalVisible: false
        })
    }

    render () {
        let { loading } = this.state
        let element = null
        if (loading) {
            element = <div className="loading">
                <Spin tip="Loading..." spinning={loading} size="large"/>
            </div>
        } else {
            element = <div style={{ height: this.state.tableHeight }}>
                <Space style={{ marginBottom: 18 }}>
                    <Button type="primary" onClick={this.showModel.bind(this)}>添加轮播图</Button>
                    <Button type="primary" onClick={this.removeAll.bind(this)} danger>清空轮播图</Button>
                </Space>
                <Table className="swiperTable" dataSource={this.state.dataSource} columns={this.columns}
                       scroll={{ y: this.state.tableHeight }} style={{ overflowY: 'auto' }}/>
                <Modal
                    title="提示"
                    visible={this.state.visible}
                    onOk={this.confirmModal.bind(this)}
                    onCancel={this.hideModal.bind(this)}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>您真的要清空所有轮播图嘛</p>
                </Modal>
                <Modal title="添加轮播图" width={800} visible={this.state.isModalVisible} onOk={this.handleOk.bind(this)}
                       onCancel={this.handleCancel.bind(this)} footer={null}>
                    <Tabs defaultActiveKey="1">
                        <TabPane tab="网络图片" key="1">
                            <Form
                                ref={this.urlFormRef}
                                name="basic"
                                labelCol={{ span: 3 }}
                                wrapperCol={{ span: 18 }}
                                initialValues={{ remember: true }}
                                autoComplete="off"
                                onFinish={this.onUrlFormFinish.bind(this)}
                                style={{ position: 'relative', top: 15, left: -15 }}
                            >
                                <Form.Item
                                    name="img"
                                    label="URL路径"
                                    rules={[{ required: true, message: '图片的url路径' }]}
                                >
                                    <Input placeholder="图片的url路径"/>
                                </Form.Item>

                                <Form.Item
                                    name="alt"
                                    label="图片描述"
                                    rules={[{ required: false, message: '图片描述' }]}
                                >
                                    <Input placeholder="图片描述"/>
                                </Form.Item>
                                <Form.Item
                                    name="link"
                                    label="跳转地址"
                                    rules={[{ required: false, message: '图片的url路径' }]}
                                >
                                    <Input placeholder="请输入跳转地址"/>
                                </Form.Item>
                                <Form.Item>
                                    <Button style={{ marginLeft: 24 }} type="primary" htmlType="submit">
                                        上传图片
                                    </Button>
                                </Form.Item>
                            </Form>
                        </TabPane>
                        <TabPane tab="本地图片" key="2">
                            <Form
                                ref={this.localFormRef}
                                name="basic"
                                labelCol={{ span: 3 }}
                                wrapperCol={{ span: 18 }}
                                initialValues={{ remember: true }}
                                autoComplete="off"
                                onFinish={this.onLocalFormFinish.bind(this)}
                                style={{ position: 'relative', top: 15, left: -20 }}
                            >
                                <Form.Item
                                    name="link"
                                    label="跳转地址"
                                    rules={[{ required: false, message: '图片的url路径' }]}
                                >
                                    <Input placeholder="请输入跳转地址"/>
                                </Form.Item>
                                <Form.Item
                                    name="alt"
                                    label="图片描述"
                                    rules={[{ required: false, message: '图片的url路径' }]}
                                >
                                    <Input placeholder="请输入图片描述"/>
                                </Form.Item>
                                <Form.Item
                                    name="img"
                                    label="上传文件"
                                    rules={[{ required: true, message: '图片的url路径' }]}
                                >
                                    <input ref={this.uploadRef} type="file" placeholder="图片的url路径" value={''}/>
                                </Form.Item>
                                <Form.Item>
                                    <Button style={{ marginLeft: 24 }} type="primary" htmlType="submit">
                                        上传图片
                                    </Button>
                                </Form.Item>
                            </Form>
                        </TabPane>
                    </Tabs>
                </Modal>
            </div>
        }

        return (<QueueAnim className="demo-content" key="demo">
            {this.props.show ? <div className="demo-tbody" key="a">{element}</div> : null}
        </QueueAnim>)
    }
}

export default connect((state) => {
    return {
        show: state.getIn(['fade', 'show'])
    }
})(Swiper)
